<template>
  <div style="padding: 10px">
    <!--    功能区域-->
    <el-page-header @back="goback" content="详情页面">
    </el-page-header>
    <el-divider></el-divider>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="下单的酒水" name="first">
        <span>{{ this.seatNumber }}的菜品详细</span>
        <div style="margin-top: 10px;margin-left: 10px"><span>总价:{{ this.totalPrice }}￥</span></div>
        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <!--          <el-button type="primary" @click="add">新增</el-button>-->
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <!--      <el-table-column  prop="seatState"  label="可用状态"></el-table-column>-->
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>



        </el-table>

        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>


          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="正在制作的酒水" name="second">

        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <!--          <el-button type="primary" @click="add">新增</el-button>-->
        </div>

        <el-table :data="tableData_cooking" stripe style="width: 100%">
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <!--      <el-table-column  prop="seatState"  label="可用状态"></el-table-column>-->
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-popconfirm title="确认？" @confirm="chucan(scope.row)">
                <template #reference>
                  <el-button type="danger" style="color: white" >出餐</el-button>
                </template>
              </el-popconfirm>


            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>


          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已出餐的酒水" name="third">

        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <!--          <el-button type="primary" @click="add">新增</el-button>-->
        </div>

        <el-table :data="tableData_finish" stripe style="width: 100%">
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <!--      <el-table-column  prop="seatState"  label="可用状态"></el-table-column>-->
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>


        </el-table>

        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>


          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已超时酒水(下单超过30分钟未处理)" name="fourth">
        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <!--          <el-button type="primary" @click="add">新增</el-button>-->
        </div>

        <el-table :data="tableData_outTime" stripe style="width: 100%">
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <!--      <el-table-column  prop="seatState"  label="可用状态"></el-table-column>-->
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>
          <el-table-column fixed="right" label="说明" width="100">
            <template #default="scope">
              <i class="el-icon-warning" :style="{color:'red'}"></i>
              <span> 已超时</span>
            </template>
          </el-table-column>


        </el-table>

        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>


          </div>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'Wine_details_clerk',

  components: {},
  data() {
    return {


      seatlist: [],


      form: {},

      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableData_cooking: [],
      tableData_finish: [],
      tableData_outTime: [],
      activeName: 'first',
      seatNumber: '',
      creatTime: ''
    }
  },

  created() {
    this.load()


  },
  computed: {
    totalPrice() {


      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
//     let date = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
// let date1 =+hh+':'+mf+':'+ss;


      let sum = 0;
      this.tableData.forEach(v => {
        sum += parseInt(v.price);
        console.log(v.creatTime.slice(11));
        let year = v.creatTime.slice(0, 4)
        let month = v.creatTime.slice(5, 7)
        let date = v.creatTime.slice(8, 10)
        let hours = v.creatTime.slice(11, 13)
        let minutes = v.creatTime.slice(14, 16)
        let second = v.creatTime.slice(17, 19)
        let time = (yy - year) * 365 * 24 * 60 * 60
            + (mm - month) * 30 * 24 * 60 * 60
            + (dd - date) * 24 * 60 * 60
            + (hh - hours) * 60 * 60
            + (mf - minutes) * 60
            + (ss - second)

        if (v.goodsState === "正在制作") {
          this.tableData_cooking.push(v)
          if (time > 1800) {
            this.tableData_outTime.push(v)
          }
        } else if (v.goodsState === "已出餐") {
          this.tableData_finish.push(v)

        }

      })
      return sum;

    },


  },

  methods: {
    goback() {
      this.$router.push("/meal_situation")
    },
    load() {
      let detail = sessionStorage.getItem("detail")
      this.seatNumber = JSON.parse(detail).seatNumber//转成字符串

      request.get("/detail/getDetail_Order", {
        params: {
          category:"0",
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          orderNo: JSON.parse(detail).orderNo

        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })


    },
    add() {
      this.dialogVisible = true
      this.form = {}

    }, save() {

      if (this.form.id) {
        //更新
        request.put("/order/updateSeat", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({

              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({

              type: "error",
              message: res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible = false //关闭弹窗

        })

      } else { //添加
        console.log(this.form)
        request.post("/order/addseat", this.form).then(res => {

          if (res.code === '0') {
            this.$messageBox({

              type: "success",
              message: "添加成功"
            })
          } else {
            this.$messageBox({

              type: "error",
              message: res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible = false   //关闭弹窗
        })


      }
    },
    deleteSeat(id) {
      request.delete("/order/deleteSeat/" + id).then(res => {
            if (res.code === '0') {

              this.$messageBox({

                type: "success",
                message: "删除成功"
              })

            } else {
              this.$messageBox({

                type: "error",
                message: res.msg
              })

            }
            this.load()
          }
      )


    },
    chucan(row){
      request.put("/detail/chucan",row).then(res=>{
            this.$message({
              message: '出餐成功',
              type: 'success'
            });

            location.reload();
      }

      )


    },

    View_details(row) {


      this.$router.push("/meal_details")


    }, handleSizeChange(pageSize) { //改变页面显示信息个数
      this.pageSize = pageSize
      this.load()

    }, handleCurrentChange(pageNum) { //改变当前页
      this.currentPage = pageNum
      this.load()
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify((row)))
      this.dialogVisible = true

    }
  }
}
</script>
